<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>提交订单</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/apply.css"/>
    <link rel="stylesheet" href="../../../css/index/hotel/date.css">
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="../../../css/index/train/train_submit.css"/>
</head>
<body style="cursor: pointer;">
<style>
    input[type="radio"] {
        content: "\a0"; /*不换行空格*/
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        width: 1em;
        height: 1em;
        margin-right: .4em;
        border-radius: 50%;
        border: 1px solid #01cd78;
        text-indent: .15em;
        line-height: 1;
    }
</style>
<div class="aui-content">
    <div style="background: #3BA9CF;padding: 1rem 0;">
        <div style="margin: 0 auto; overflow: auto;text-align: center;width: 14rem;">
            <div style="float: left;">
                <p class="station_name from_station"></p><!--起始站，例：北京南-->
                <p class="trave_time start_time"></p><!--出行时间：例：19:34-->
                <p class="start_date"></p><!--出行日期：例：2018-08-01-->
            </div>
            <div style="float:left;overflow: auto;margin: 0 1rem;">
                <p class="train_codes"></p><!--车型，例：D313-->
                <img style="width: 4.5rem;margin-top: 0.3rem;margin-bottom: 0.3rem;" src="../../../image/time_table.png"/>
                <p class="train_time"></p><!--出行分钟，例：727分钟-->
            </div>
            <div style="float: right;">
                <p class="station_name to_station"></p><!--到达站，例：上海-->
                <p class="trave_time to_time"></p><!--到达时间，例：07：41-->
                <p class="end_date"></p><!--到达日期，例：2018-08-01-->
            </div>
        </div>

    </div>
    <div style="background: #fff;margin-top: 0.5rem">
        <div style="padding: 1rem;overflow: auto;">
            <div>
                <div class="trave_info u_ticket">人数</div>
                <div class="trave_info population"></div><!--人数,例：2-->
            </div>
            <div style="margin-top: 1rem;">
                <div class="trave_info u_ticket">票价</div>
                <div class="trave_info price"></div><!--票价，例：￥553/张×3-->
            </div>
            <div style="padding-bottom: 1rem;">
                <div class="trave_info u_ticket">订单总额</div>
                <div class="trave_info" style="color: red;font-weight: bold;text-align:right;">￥<span class="total_price"></span></div><!--订单总额，例：￥5623-->
            </div>

        </div>
    </div>
    <div style="margin-top: 0.5rem;background: #fff;overflow: auto;border-bottom: 1px solid #E0E0E0">
        <div class="u_title">乘客</div>
    </div>
    <div class="passenger">
        <div style="background: #fff;overflow: auto;border-bottom: 1px solid #E0E0E0;">
        </div>
    </div>

    <!--选择要提交的成本中心-->
    <div style="margin-top: 0.5rem;background: #fff;overflow: auto;" class="aui-hide">
        <div class="u_title">选择要提交的成本中心</div>
        <div id="select_cost">
        </div>
        <!-- <div class="u_info" id="select_cost">
            <div class="aui-list-item-inner" style="overflow: auto;text-align: center">
                <div class="aui-list-item-label" style="width:20%;float: left;height: 2rem;line-height: 2rem;">
                    <input type="radio" name="cost_id" >
                </div>
                <div class="aui-list-item-input" style="width:80%;float: right;height: 2rem;line-height: 2rem;">
                    <div style="float: left;">
                        <span style="font-size: 0.8rem;font-weight: bold;">技术部</span>
                    </div>
                </div>
                <div style="text-align: left;text-indent: 2em;color: #FF0000;font-size: 0.7rem"></div>
            </div>
        </div> -->
    </div>

    <!--联系人-->
    <div class="aui-content box-shodow padding-10 mt-30" style="clear: both;margin-top: 0.5rem;background: #fff;">
        <div class="u_title">联系人</div>
        <div class="aui-card-list-content ml-10" style="">
            <ul class="aui-list aui-media-list contact" id="contact">
                <li class="aui-list-item aui-list-item-middle" style="padding-left: 0;" onclick="selectContant()">
                    <div class="aui-media-list-item-inner">
                        <div style="height: 100%;width:20%;vertical-align: middle;padding: 0rem 0.5rem;float: left;">
                            <div style="border-radius: 50%;background: #F9C003;text-align: center;width: 2rem;height: 2rem;line-height: 2rem;">
                                <span style="font-weight: bold;font-size: 1rem;color: #fff;" class="contact_char"></span>
                            </div>
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow" style="line-height: 2rem;">
                            <span class="contact_name" style="color: #000;"></span>
                            <span class="float-right conatct_mobile" style="font-size: 15px;color: #000;padding-left: 2rem"></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--在线选座-->
    <div class="aui-content box-shodow padding-10 mt-30 checkSeat aui-hide" style="clear: both;margin-top: 0.5rem;background: #fff;">
        <div class="u_title" style="overflow:auto;"><p class="seat_title">在线选座</p><p class="seat_num"><span class="s_num" id="selectedCount">0</span>/<span class="p_num"></span></p></div>
        <div class="aui-card-list-content ml-10 seat_check">
            <div class="windows">窗</div>
            <div class="left_seat">
              <!-- <p>
                <i class="iconfont icon-A1"></i>
                <i class="iconfont icon-B1"></i>
                <i class="iconfont icon-cc"></i>
              </p>
              <p>
                <i class="iconfont icon-A1"></i>
                <i class="iconfont icon-B1"></i>
                <i class="iconfont icon-cc"></i>
              </p> -->
            </div>
            <div class="passage">过道</div>
            <div class="right_seat">
              <!-- <p>
                <i class="iconfont icon-D1"></i>
                <i class="iconfont icon-F"></i>
              </p>
              <p>
                <i class="iconfont icon-D1"></i>
                <i class="iconfont icon-F"></i>
              </p> -->
            </div>
            <div class="windows">窗</div>
        </div>
    </div>
    <!--出行目的-->
    <div style="margin-top: 0.5rem;background: #fff;overflow: auto;" id="travelPurpose">
        <div class="u_info">
            <div class="aui-list-item-inner">
                <div style="border-bottom: 1px solid #DCDCDC;overflow: auto;">
                    <div class="aui-list-item-label card_side u_ticket" style="width:30%;line-height: 2rem;">
                        出行目的
                    </div>
                    <div class="aui-list-item-input" style="float: right;height: 2rem;line-height: 2rem;">
                        <select class="purpose hotel_type trip_cauce" name="trip_cause" style="width: 6rem;height: 100%;margin-right: 1rem;font-size: 0.8rem;font-weight: bold;">
                            <option selected="selected" >商务谈判</option>
                            <option>商务考察/视察</option>
                            <option>学习/培训</option>
                            <option>技术支持</option>
                            <option>会展/展务</option>
                            <option>奖励/旅游</option>
                            <option>其他</option>
                        </select>
                    </div>
                </div>

                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input" >
                        <input type="text" name="memo1" placeholder="备注(出行目的为其他是必填)">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--违规原因-->
    <div style="margin-top: 0.5rem;background: #fff;overflow: auto;display: none" id="violation_reason">
        <div class="u_info">
            <div class="aui-list-item-inner" >
                <div style="border-bottom: 1px solid #DCDCDC;overflow: auto;">
                    <div class="aui-list-item-label card_side u_ticket" style="width:30%;line-height: 2rem;">
                        违规原因
                    </div>
                    <div class="aui-list-item-input" style="float: right;height: 2rem;line-height: 2rem;">
                        <select class="violation hotel_type violation_reason" name="violation_reason" style="width: 100%;height: 100%;margin-right: 0.5rem;font-size: 0.8rem;font-weight: bold;line-height: 2rem;">

                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--条款和限制-->
    <div style="padding: 0.3rem 1rem 1rem 1rem;">
        <p><span style="color: red;">*</span><span style="color: #7B7B7B;">条款和限制</span></p>
        <p class="order_info">请仔细核对订单中的乘客信息、成本中心、联系人、政策执行、出行原因等相关信息</p>
        <p class="order_info">内容点击“同意以上条款，去核对”，表示确认无误，同时已阅读并同意《预订协议》</p>
        <div class="aui-list-item-inner" style="height: 0.7rem;line-height: 0.7rem;">
            <label style="font-size: 0.5rem;color: #3CB0D6;"><input class="aui-checkbox" type="checkbox" name="checkbox" checked="" style="width: 0.7rem;height: 0.7rem;"> 同意以上条款去核对</label>
        </div>
    </div>
    <div style="padding:1rem;">
        <div class="aui-btn aui-btn-primary aui-btn-block" onclick="submitOrder()">提交订单</div>
    </div>

</div>

</body>
</html>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/date.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-dialog.js" ></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-toast.js" ></script>
<script type="text/javascript" src="../../../script/widget/js-time.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../service/index/train/trainOrder.js"></script>
<script type="text/template" charset="utf-8" id="user_info_tpl">
    {{ for(var i=0;i<it.length;i++){ }}
    {{ if(it.self_type==1 ){ }}
    <div style="background: #fff;overflow: auto;border-bottom: 1px solid #E0E0E0;width: 100%" class="user_list private_user" display="none">
        <div class="u_info">
            <div style="height: auto;overflow:auto;width:20%;vertical-align: middle;padding: 1.5rem 0.5rem;float: left;">
                <div style="border-radius: 50%;background: #2396F3;text-align: center;width: 2rem;height: 2rem;line-height: 2rem;">
                    <span class="letter" style="font-weight: bold;font-size: 1rem;color: #fff;">{{=it[i].user_name.substring(0, 1)}}</span>
                </div>
            </div>
            <div style="float: left;padding: 0.5rem 0rem;width: 80%;" class="sel_card" id='{{=it[i].user_id}}' onclick="selectCardInfo(this)">
                <div style="float: left;">
                    <div><span class="user_name">{{=it[i].user_name}}</span></div>
                    <div><span class="card_side send_sms">发送短信</span></div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label card_side u_ticket card_type">
                            请选择证件
                        </div>
                        <div class="aui-list-item-input" style="float: right;">
                            <span class="card_side u_ticket card_num"></span>
                        </div>
                    </div>
                </div>
                <div style="float: right;margin-top: 1rem;">
                    <i class="iconfont icon-gengduo" style="color:#AAAAAA;font-size: 1.2rem;vertical-align: middle;"></i>
                </div>
            </div>
        </div>
        <div class="mobile" style="display:none">{{=it[i].mobile}}</div>
        <div class="travel_user_id" style="display:none">{{=it[i].user_id}}</div>
        <div class="travels_id" style="display:none">{{=it[i].travels_id}}</div>
    </div>
    {{ }else{ }}
    <div display="none" style="background: #fff;overflow: auto;border-bottom: 1px solid #E0E0E0;width: 100%" class="user_list public_user">
        <div class="u_info">
            <div style="height: auto;overflow:auto;width:20%;vertical-align: middle;padding: 1.5rem 0.5rem;float: left;">
                <div style="border-radius: 50%;background: #2396F3;text-align: center;width: 2rem;height: 2rem;line-height: 2rem;">
                    <span class="letter" style="font-weight: bold;font-size: 1rem;color: #fff;">{{=it[i].user_name.substring(0, 1)}}</span>
                </div>
            </div>
            <div style="float: left;border-bottom: 1px solid #E0E0E0;width: 80%;" class="sel_card" id='{{=it[i].user_id}}' onclick="selectCardInfo(this)">
                <div style="float: left;">
                    <div><span class="user_name">{{=it[i].user_name}}</span></div>
                    <div><span class="card_side"><span>{{=it[i].approval_name}}</span><span class="send_sms">发送短信</span></span>
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label card_side u_ticket card_type">
                            请选择证件
                        </div>
                        <div class="aui-list-item-input" style="float: right;">
                            <span class="card_side u_ticket card_num"></span>
                        </div>
                    </div>
                </div>
                <div style="float: right;">
                    <i class="iconfont icon-gengduo" style="color:#AAAAAA;font-size: 1.2rem;vertical-align: middle;"></i>
                </div>
            </div>
            <div class="aui-list-item-inner" cost_user_id="{{=it[i].user_id}}" id="{{=it[i].user_id}}{{=it[i].mobile}}" onclick="getPolicyList(this)">
                <div class="aui-list-item-label card_side u_ticket" style="line-height: 2rem;">
                    成本中心
                </div>
                <div class="aui-list-item-input" style="float: right;height: 2rem;line-height: 2rem;">
                    <div style="float: left;">
                        <span class="card_side u_ticket cost_name">请选择成本中心</span>
                    </div>
                    <div style="float: right;">
                        <i class="iconfont icon-gengduo" style="color:#AAAAAA;font-size: 1.2rem;vertical-align: middle;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mobile" style="display:none">{{=it[i].mobile}}</div>
        <div class="travel_user_id" style="display:none">{{=it[i].user_id}}</div>
        <div class="travels_id" style="display:none">{{=it[i].travels_id}}</div>
    </div>
    {{ } }} {{ } }}
</script>
<script id="leftSeat" charset="utf-8" type="text/template">
  {{ if(it.userCount == 1){ }}
      {{ if(it.seatName == '商务座' && it.trainType == 'G') { }}
          <p>
              <i class="seatList iconfont icon-A1" type="1A"></i>
              <i class="seatList iconfont icon-cc" type="1C"></i>
          </p>
      {{ } else if(it.seatName == '一等座') { }}
          <p>
              <i class="seatList iconfont icon-A1" type="1A"></i>
              <i class="seatList iconfont icon-cc" type="1C"></i>
          </p>
      {{ } else { }}
          <p>
              <i class="seatList iconfont icon-A1" type="1A"></i>
              <i class="seatList iconfont icon-B1" type="1B"></i>
              <i class="seatList iconfont icon-cc" type="1C"></i>
          </p>
      {{ } }}
  {{ } else { }}
      {{ if(it.seatName == '商务座' && it.trainType == 'G') { }}
              <p>
                  <i class="seatList iconfont icon-A1" type="1A"></i>
                  <i class="seatList iconfont icon-cc" type="1C"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-A1" type="2A"></i>
                  <i class="seatList iconfont icon-cc" type="2C"></i>
              </p>
          {{ } else if(it.seatName == '一等座') { }}
              <p>
                  <i class="seatList iconfont icon-A1" type="1A"></i>
                  <i class="seatList iconfont icon-cc" type="1C"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-A1" type="2A"></i>
                  <i class="seatList iconfont icon-cc" type="2C"></i>
              </p>
          {{ } else { }}
              <p>
                  <i class="seatList iconfont icon-A1" type="1A"></i>
                  <i class="seatList iconfont icon-B1" type="1B"></i>
                  <i class="seatList iconfont icon-cc" type="1C"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-A1" type="2A"></i>
                  <i class="seatList iconfont icon-B1" type="2B"></i>
                  <i class="seatList iconfont icon-cc" type="2C"></i>
              </p>
          {{ } }}
  {{ } }}
</script>
<script id="rightSeat" charset="utf-8" type="text/template">
  {{ if(it.userCount == 1){ }}
          {{ if(it.seatName == '商务座') { }}
              <p>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
          {{ } else if(it.seatName == '一等座') { }}
              <p>
                  <i class="seatList iconfont icon-D1" type="1D"></i>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
          {{ } else { }}
              <p>
                  <i class="seatList iconfont icon-D1" type="1D"></i>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
          {{ } }}
          {{  } else { }}
          {{ if(it.seatName == '商务座') { }}
              <p>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-F" type="2F"></i>
              </p>
          {{ } else if(it.seatName == '一等座') { }}
              <p>
                  <i class="seatList iconfont icon-D1" type="1D"></i>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-D1" type="2D"></i>
                  <i class="seatList iconfont icon-F" type="2F"></i>
              </p>
          {{ } else { }}
              <p>
                  <i class="seatList iconfont icon-D1" type="1D"></i>
                  <i class="seatList iconfont icon-F" type="1F"></i>
              </p>
              <p>
                  <i class="seatList iconfont icon-D1" type="2D"></i>
                  <i class="seatList iconfont icon-F" type="2F"></i>
              </p>
          {{ } }}
      {{  } }}
</script>
<script type="text/javascript">
    var trainOrder;
    apiready = function() {
        api.parseTapmode();
        trainOrder = new trainOrder();
        //监听常用联系人返回值
        api.addEventListener({
            name: 'contactUser'
        }, function(ret, err) {
          if (ret.value.contact_id != null && ret.value.contact_id != undefined) {
            $('.contact_name').text(ret.value.contact_name);
            $('.contact_name').attr('contact_id',ret.value.contact_id);
            $('.conatct_mobile').text(ret.value.contact_mobile);
            var char = makePy(ret.value.contact_name.substring(0, 1));
            $('.contact_char').text(char[0]);
          }
        });
    };

    //选择证件
    function selectCardInfo(obj) {
        trainOrder.selectCardInfo(obj);
    }

    //提交订单
    function submitOrder() {
        trainOrder.submitOrder();
    }

    //联系人
    function selectContant() {
        trainOrder.selectContant();
    }

    //员工选择成本中心
    function getPolicyList(obj) {
        trainOrder.getPolicyList(obj);
    }

    //获取当前成本中心的审核人信息
    function getApproveInfo(obj) {
        trainOrder.getApproveInfo(obj);
    }

</script>
